import {defineComponent} from "vue";
import {NDialogProvider, NLoadingBarProvider, NMessageProvider, NNotificationProvider} from "naive-ui";

/**
 * NaiveProvider 组件
 * @date 2023/9/25
 */
export default defineComponent({
  name: "CustomNaiveProvider",
  setup(_, { slots }) {
    // 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
    function registerNaiveTools() {
      window.$loadingBar = useLoadingBar();
      window.$dialog = useDialog();
      window.$message = useMessage();
      window.$notification = useNotification();
    }

    const NaiveProviderContent = defineComponent({
      name: "NaiveProviderContent",
      setup() {
        registerNaiveTools();
      },
      render() {
        return h("div");
      },
    });

    return () => (
      <NLoadingBarProvider>
        <NDialogProvider>
          <NNotificationProvider
            themeOverrides={{
              borderRadius: "10px",
            }}
          >
            <NMessageProvider>
              <>{slots.default?.()}</>
              <NaiveProviderContent />
            </NMessageProvider>
          </NNotificationProvider>
        </NDialogProvider>
      </NLoadingBarProvider>
    );
  },
});
